import React from 'react';
import ReactDOM from 'react-dom/client';
// 从 redux 中引入创建 store 的方法
import { legacy_createStore as createStore } from 'redux';

// 开始 Redux
// Redux 三大核心概念之三：store。

// 创建 store 需要一个 reducer
const counter = (state = 10, action) => {
  // switch (action.type) {
  //   case 'increment':
  //     return state + action.payload;

  //   default:
  //     return state;
  // }
  // 改为 if/else 实现 reducer
  if (action.type === 'increment') {
    return state + action.payload;
  } else if (action.type === 'decrement') {
    return state - action.payload;
  } else {
    return state;
  }
};

// 创建 store
const store = createStore(counter);

// // store 分发action 修改数据
// store.dispatch({ type: 'increment', payload: 10 });

// // 查看数据修改后的结果
// const result = store.getState();
// console.log(result);

// // 再次修改数据
// store.dispatch({ type: 'increment', payload: 5 });

// const result2 = store.getState();
// console.log(result2);

// // 再次修改数据
// store.dispatch({ type: 'decrement', payload: 10 });

// const result3 = store.getState();
// console.log(result3);

// 订阅数据的变化
const unSubscribe = store.subscribe(() => {
  console.log('结果: ', store.getState());
});

// 增10
store.dispatch({ type: 'increment', payload: 10 });
// 增5
store.dispatch({ type: 'increment', payload: 5 });
// unSubscribe();
// 减10
store.dispatch({ type: 'decrement', payload: 10 });

// 应用（项目）渲染的根节点
const root = ReactDOM.createRoot(document.getElementById('root'));

// 渲染应用
root.render(<div>Redux</div>);
